<!DOCTYPE HTML>

<html>
	<head>
		<link type="shortcut icon" href="https://monkeyhbd.gitee.io/image/mokey-land.png">
		<!-- Welcome to visit monkeyhbd.gitee.io. -->
		<title>Vue Study 1 | Monkeyhbd</title>
		<meta name="viewport" content="width=device-width initial-scale=1">
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<style>
			body {
				font-family: sans-serif;
			}

			.vue-study-unit {
				border-top: 1px solid gray;
			}
		</style>
	</head>
	<body>
		<div class="vue-study-unit">
			<h1 id="vue1">{{tittle}}</h1>
			<script>
				var vue = new Vue({
					el: '#vue1',
					data: {
						tittle: "Monkeyhbd's Vue Study Note"
					}
				});
			</script>
		</div>

		<div class="vue-study-unit">
			<h2 id="vue2">{{literal}}</h2>
			<script>
				var vue = new Vue({
					el: '#vue2',
					data: {
						literal: "Vue 条件语句"
					}
				});
			</script>
			<div id="vue3">
				<p>Monkeyhbd<span v-if="isHandsome"> is</span><span v-else> is not</span> a handsome boy.</p>
				<p v-show="!isHandsome">Above words are joke.</p>
			</div>
			<script>
				var vue = new Vue({
					el: '#vue3',
					data: {
						isHandsome: false
					}
				});
			</script>
		</div>

		<div class="vue-study-unit">
			<div id="vue4">
				<h2>{{literal}}</h2>
				<script>
					var vue = new Vue({
						el: '#vue4',
						data: {
							literal: "Vue 循环语句"
						}
					});
				</script>
			</div>
			<div>
				<div id="vue5">
					<p v-for="(value, key, index) in websites">
						{{index + 1}}.&nbsp;&nbsp;{{key}}:&nbsp;&nbsp;
						<a v-bind:href="'https://'+value" target="_blank">{{value}}</a>
					</p>
					<p><span v-for="x in 10">{{x}}&nbsp;</span></p>
				</div>
				<script>
					var vue = new Vue({
						el: '#vue5',
						data: {
							websites: {
								Monkeyhbd: 'monkeyhbd.gitee.io',
								Lensfrex: 'huhu.ciduid.top'
							}
						}
					});
				</script>
			</div>
		</div>

		<div class="vue-study-unit">
			<h2 id="vue6">{{literal}}</h2>
			<script>
				var vue = new Vue({
					el: '#vue6',
					data: {
						literal: 'Vue 组件'
					}
				});
			</script>
			<div>
				<div id="vue7">
					<hello></hello>
				</div>
				<script>
					var vue = new Vue({
						el: '#vue7',
						components: {
							'hello': {
								template: '<p>Hello Vue</p>'
							}
						}
					});
				</script>
			</div>
			<div>
				<div id="vue8">
					<p>
						Vue component counter:&nbsp;&nbsp;
						<counter></counter>
					</p>
				</div>
				<script>
					var vue = new Vue({
						el: '#vue8',
						components: {
							'counter': {
								data: function() {
									return {
										time: 0
									}
								},
								template: '<button v-on:click="time += 1">{{time}}</button>'
							}
						}
					});
				</script>
			</div>
			<div>
				<div id="vue9">
					<h3>{{literal}}</h3>
					<div>
						<article-info v-for="article in articles"
						              v-bind:article="article"></article-info>
					</div>
				</div>
				<script>
					var vue = new Vue({
						el: '#vue9',
						data: {
							literal: 'Vue Prop',
							articles: [
								{tittle: 'C++ 构造函数，析构函数', time: '3/20/2022', author: 'Monkeyhbd'},
								{tittle: '常见网课网站的刷课脚本', time: '3/23/2022', author: 'Monkeyhbd'}
							]
						},
						components: {
							'article-info': {
								props: ['article'],
								template: `
									<p>
										<span>Article:&nbsp;</span>&nbsp;
										<span style="font-weight: bold">[{{article.tittle}}]</span>&nbsp;
										<span>{{article.time}}</span>&nbsp;
										<span>{{article.author}}</span>&nbsp;
									</p>
								`
							}
						}
					});
				</script>
			</div>
		</div>

		<div class="vue-study-unit"></div>
	</body>
</html>
